import React, { useEffect, useState } from 'react'
import TopNav from '../../../components/TopNav/TopNav'
import { ArrowLeft, InfoO, FriendsO, PhotoO, EnvelopO, GuideO } from '@react-vant/icons';
import './CrowdDetail.css'
import { Card, Collapse, Tag } from 'react-vant';
import { useNavigate } from 'react-router';
import axios from 'axios';

const Index = () => {
    const navigate = useNavigate()
    const [userProfileImage, setUserProfileImage] = useState('');
    const [teamData, setTeamData] = useState('')
    const [data, setData] = useState([])
    const Init = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/crowdDetail')
        setData(res.data)
        console.log(res.data);

    }
    useEffect(() => {
        Init()
        // 从本地存储读取图片 URL  
        const storedUserProfileImage = localStorage.getItem('crowdImage');
        if (storedUserProfileImage) {
            setUserProfileImage(storedUserProfileImage); // 设置状态  
        }
        const storedTeamData = localStorage.getItem('teamData');
        if (storedTeamData) {
            setTeamData(storedTeamData)
        }
    }, []); // 空数组表示只在组件挂载时执行一次  



    return (
        <div>
            <TopNav />
            <div className='CrowdDetail-Back'
                onClick={() => {
                    navigate('/messagedetail')
                }}
            >
                <ArrowLeft />
                <span>返回群聊</span>
            </div>
            <div className='CrowdDetail-Title'>
                <p>群组详情</p>
            </div>
            <Card className='CrowdDetail-Card'>
                {/* 当前群组的头像 */}
                <div className='CrowdDetail-Card-Image'>
                    {userProfileImage ? (
                        <img src={userProfileImage} alt="User Profile" style={{ width: '50px', height: '50px' }} />
                    ) : (
                        <p>没有找到群组头像。</p>
                    )}
                </div>
                {/* 当前群组的名称 */}
                <div className='CrowdDetail-Card-Title'>
                    <p>{teamData}</p>
                </div>
                {/* 搜索，添加和更多按钮 */}
                <div className='CrowdDetail-Card-Icon'>
                    <div className='CrowdDetail-Card-Icon-Search'>
                        <img src='./CrowdDetail/search.png' style={{ width: '35px' }} />
                    </div>
                    <div className='CrowdDetail-Card-Icon-Friends'>
                        <img src='./CrowdDetail/adduser.png' style={{ width: '35px' }} />
                    </div>
                    <div className='CrowdDetail-Card-Icon-Ellipsis'>
                        <img src='./CrowdDetail/more.png' style={{ width: '35px' }} />
                    </div>
                </div>
                <div>
                    <Collapse accordion>
                        {
                            data.map((item, index) => {
                                return (
                                    <Collapse.Item
                                        key={index}
                                        // 通过各个标题名称来决定图标
                                        icon={
                                            item.CollapseTitle === "信息"
                                                ? <InfoO />
                                                : item.CollapseTitle === "成员"
                                                    ? <FriendsO />
                                                    : item.CollapseTitle === "媒体"
                                                        ? <PhotoO />
                                                        : item.CollapseTitle === "附件"
                                                            ? <EnvelopO />
                                                            : item.CollapseTitle === "链接"
                                                                ? <GuideO /> : ''
                                        }
                                        title={item.CollapseTitle}
                                        name={index}
                                    >
                                        {/* 根据 item 的不同类型来渲染不同的内容 */}
                                        {
                                            item.CollapseTitle === "信息" && (
                                                <div>
                                                    <h4>{item.crowdTitle}</h4>
                                                    <p>{item.crowdDesc}</p>
                                                </div>
                                            )
                                        }
                                        {
                                            item.CollapseTitle === "成员" && item.user && (
                                                <div>
                                                    {/* 二层循环，遍历二层嵌套的数据，数据为成员数据 */}
                                                    {item.user.map((user, userIndex) => (
                                                        <div key={userIndex} className='CrowdDetail-Card-Icon-Friends-User'>
                                                            <div className='CrowdDetail-Card-Icon-Friends-User-Img'>
                                                                <img src={user.userImg} alt={user.userTitle} style={{ width: '30px', height: '30px' }} />
                                                                <p>
                                                                    {user.userTitle}
                                                                </p>
                                                            </div>
                                                            <div className='CrowdDetail-Card-Icon-Friends-User-Tag'>
                                                                <Tag type={user.useType}>{user.position}</Tag>
                                                            </div>

                                                        </div>
                                                    ))}
                                                </div>
                                            )
                                        }
                                        {
                                            item.CollapseTitle === "媒体" && (
                                                <p>目前没有媒体文件。</p>
                                            )
                                        }
                                        {
                                            item.CollapseTitle === "附件" && item.crowdImg && (
                                                <div>
                                                    <img src={item.crowdImg} alt="附件预览" style={{ width: '100px' }} />
                                                </div>
                                            )
                                        }
                                        {
                                            item.CollapseTitle === "链接" && (
                                                <div>
                                                    <p>
                                                        React官网：
                                                        <a href="https://react-vant.3lang.dev/" target="_blank" rel="noopener noreferrer">
                                                            https://react-vant.3lang.dev/
                                                        </a>
                                                    </p>
                                                    <p>
                                                        NestJS官网：
                                                        <a href="https://www.nestjs.com.cn/" target="_blank" rel="noopener noreferrer">
                                                            https://www.nestjs.com.cn/
                                                        </a>
                                                    </p>
                                                </div>

                                            )
                                        }
                                    </Collapse.Item>
                                );
                            })
                        }
                    </Collapse>
                </div>
            </Card >
        </div >
    )
}

export default Index